<template>
  <div class="secondPlatWrap">
    <searchheader @search="searchList"></searchheader>

    <div class="secondPlatWrapContent" id="g2map">
      <div class="secondPlatWrapContentLeft js-openMenu">
        <div class="openMenu"><img class="arrowL" src="../assets/images/secondPlat/arrowL.png" alt=""></div>
        <legends :waterlist="water" :watcherlist="watcher" :carlist="cars"></legends>
        <consitinfo :consit="conSitInfo"></consitinfo>

        <div class="abilitySituation">
          <div>
            <h2>污水厂运行概况</h2>
            <div class="dateSelect">
              <label for="date2">年份</label>
              <select name="" id="date2">
                <option value="2018年">2018年</option>
                <option value="2017年">2017年</option>
                <option value="2016年">2016年</option>
              </select>
            </div>
          </div>
          <!--<div class="abiSitTab">-->
          <!--<ul>-->
          <!--<li class="on">污水厂</li>-->
          <!--</ul>-->
          <!--</div>-->
          <div class="constructionSituationInner js-abilitySituation">
            <div class="sewage show">
              <div class="abiSitEchart" id="abiSitEchart" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;">
                <div
                  style="position: relative; overflow: hidden; width: 227px; height: 195px; padding: 0; margin: 0; border-width: 0; cursor: default;">
                  <canvas width="283" height="243" data-zr-dom-id="zr_0"
                          style="position: absolute; left: 0; top: 0; width: 227px; height: 195px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; border-width: 0;"></canvas>
                </div>
                <div
                  style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-radius: 4px; color: rgb(255, 255, 255); font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 14px; font-family: 'Microsoft YaHei'; line-height: 21px; padding: 5px; left: -28px; top: 117px;">
                  建设概况 <br>抽水能力: 200 (33.33%)
                </div>
              </div>
              <ul class="abiSitInfo">
                <li><p>抽水能力</p>
                  <p>100万顿/日</p></li>
                <li><p>污水处理量</p>
                  <p>150万顿/日</p></li>
                <li><p>污泥处理量</p>
                  <p>400万顿/日</p></li>
              </ul>
            </div>
            <div class="pumper">
              2
            </div>
          </div>
        </div>
        <div class="pipelineInspection">
          <div>
            <h2>泵站运行概况</h2>
            <div class="dateSelect">
              <label for="date3">年份</label>
              <select name="" id="date3">
                <option value="2018年">2018年</option>
                <option value="2017年">2017年</option>
                <option value="2016年">2016年</option>
              </select>
            </div>
          </div>
          <div class="pipInsInfo" id="pipInsInfo" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;">
            <div  style="position: relative; overflow: hidden; width: 361px; height: 175px; padding: 0; margin: 0; border-width: 0; cursor: default;">
              <canvas width="451" height="218" data-zr-dom-id="zr_0"
                      style="position: absolute; left: 0; top: 0; width: 361px; height: 175px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; border-width: 0;"></canvas>
            </div>
            <div
              style="position: absolute; display: none; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-radius: 4px; color: rgb(255, 255, 255); font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 14px; font-family:'Microsoft YaHei'; line-height: 21px; padding: 5px; left: 297px; top: 50px;">
              雨污泵站<br><span
              style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#00a2ff"></span>流量
              : 31
            </div>
          </div>
          <p class="w-illustrate" style="padding-right: .25rem;">
            <span><i></i>X轴类型</span>
            <span><i></i>Y轴流量(㎥/h)</span>
          </p>
        </div>
      </div>
      <div class="secondPlatWrapContentRight js-openMenu">
        <div class="openMenu"><img class="arrowL" src="../assets/images/secondPlat/arrowL.png" alt=""></div>
        <div class="realTimeMonitor">
          <h2>实时监测</h2>
          <p>今日/累计报警次数：<b>30</b>次</p>
          <div class="realTimeMonitorInner">
            <ul>
              <li>
                <span class="csjishui" id="csjishui" _echarts_instance_="ec_1523153869527"
                      style="-webkit-tap-highlight-color: transparent; user-select: none; background: transparent;">
                  <div style="position: relative; overflow: hidden; width: 50px; height: 50px; padding: 0; margin: 0; border-width: 0;border-radius: 50%"><canvas
                  width="62" height="62" data-zr-dom-id="zr_0"
                  style="position: absolute; left: 0; top: 0; width: 50px; height: 50px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; border-width: 0;"></canvas></div></span>

                <span class="gwyunxing" id="gwyunxing" _echarts_instance_="ec_1523153869528"
                      style="-webkit-tap-highlight-color: transparent; user-select: none; background: transparent;">
                  <div style="position: relative; overflow: hidden; width: 50px; height: 50px; padding: 0; margin: 0; border-width: 0;border-radius: 50%">
                  <canvas width="62" height="62" data-zr-dom-id="zr_0" style="position: absolute; left: 0; top: 0;  user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; border-width: 0;"></canvas></div></span>
              </li>
              <li>
                <span class="bzyunxing" id="bzyunxing" _echarts_instance_="ec_1523153869529"
                      style="-webkit-tap-highlight-color: transparent; user-select: none; background: transparent;"><div
                  style="position: relative; overflow: hidden; width: 50px; height: 50px; padding: 0; margin: 0; border-width: 0;border-radius: 50%"><canvas
                  width="62" height="62" data-zr-dom-id="zr_0"
                  style="position: absolute; left: 0; top: 0; width: 50px; height: 50px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; border-width: 0;"></canvas></div></span>
                <span class="wscyunxing" id="wscyunxing" _echarts_instance_="ec_1523153869530"
                      style="-webkit-tap-highlight-color: transparent; user-select: none; background: transparent;"><div
                  style="position: relative; overflow: hidden; width: 51px; height: 50px; padding: 0; margin: 0; border-width: 0;border-radius: 50%"><canvas
                  width="63" height="62" data-zr-dom-id="zr_0"
                  style="position: absolute; left: 0; top: 0; width: 51px; height: 50px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; border-width: 0;"></canvas></div></span>
                <span class="szjiance" id="szjiance" _echarts_instance_="ec_1523153869531"
                      style="-webkit-tap-highlight-color: transparent; user-select: none; background: transparent;"><div
                  style="position: relative; overflow: hidden; width: 50px; height: 50px; padding: 0; margin: 0; border-width: 0;border-radius: 50%"><canvas
                  width="62" height="62" data-zr-dom-id="zr_0"
                  style="position: absolute; left: 0; top: 0; width: 50px; height: 50px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; border-width: 0;"></canvas></div></span>
              </li>
            </ul>
          </div>
        </div>
        <div class="informationList">
          <h2>报警信息列表</h2>
          <div>
            <ul class="informationListUl mCustomScrollbar _mCS_1">
              <div class="mCustomScrollBox mCS-light customer_scroll" style="position:relative; height:100%; overflow:auto; max-width:100%;">
                <div class="mCSB_container" style="position: relative; top: 0;">
                  <li class="level1">2017年04月15日10时 合肥市蜀山区南天竹花卉</li>
                  <li class="level2">2017年04月15日10时 合肥市蜀山区sssssss南天竹花卉</li>
                  <li class="level3">2017年04月15日10时 合肥市蜀山区南天竹花卉</li>
                  <li class="level2">2017年04月15日10时 合肥市蜀山ssssssssss区南天竹花卉</li>
                  <li class="level1">2017年04月15日10时 合肥市蜀山区南天竹花卉</li>
                  <li class="level1">2017年04月15日10时 合肥市蜀山区南天竹花卉</li>
                </div>
              </div>
            </ul>
          </div>
        </div>
        <div class="checkingInformationWrap">
          <h2>当日巡检</h2>
          <div class="checkingInformationUl mCustomScrollbar _mCS_2">
            <div class="mCustomScrollBox mCS-light customer_scroll " id="mCSB_2"  style="position:relative; height:100%; overflow:auto; max-width:100%;">
              <div class="mCSB_container" style="position: relative; top: 0;">
                <table>
                  <tbody>
                  <tr>
                    <td class="">
                      <p class="areaTitle">A区</p>
                      <p class="onLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>在线人数：<span>55</span>人
                      </p>
                      <p class="offLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>离线人数：<span>4</span>人
                      </p>
                    </td>
                    <td class="cur">
                      <p class="areaTitle">B区</p>
                      <p class="onLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>在线人数：<span>55</span>人
                      </p>
                      <p class="offLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>离线人数：<span>4</span>人
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <p class="areaTitle">A区</p>
                      <p class="onLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>在线人数：<span>55</span>人
                      </p>
                      <p class="offLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>离线人数：<span>4</span>人
                      </p>
                    </td>
                    <td class="">
                      <p class="areaTitle">B区</p>
                      <p class="onLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>在线人数：<span>55</span>人
                      </p>
                      <p class="offLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>离线人数：<span>4</span>人
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p class="areaTitle">A区</p>
                      <p class="onLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>在线人数：<span>55</span>人
                      </p>
                      <p class="offLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>离线人数：<span>4</span>人
                      </p>
                    </td>
                    <td>
                      <p class="areaTitle">B区</p>
                      <p class="onLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>在线人数：<span>55</span>人
                      </p>
                      <p class="offLineNum"><i class="icon iconfont icon-xitongyunweiyonghu"></i>离线人数：<span>4</span>人
                      </p>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="watchersInfo">
      <img src="../assets/images/secondPlat/zhibanyuan.png" alt="">
      <table>
        <tbody>
        <tr>
          <td>姓名：</td>
          <td>买买买</td>
        </tr>
        <tr>
          <td>手机号码：</td>
          <td>18709863966</td>
        </tr>
        <tr>
          <td>所属单位：</td>
          <td>合肥市排水管理办公室</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  require("./../assets/css/plat-common.css");
  require("./../assets/css/secondPlatDesk.css");
  require("./../assets/css/jquery.mCustomScrollbar.css");

  import echarts from 'echarts';
  import echartsFill from "echarts-liquidfill";

  import legends from "./common/legend";
  import Searchheader from "./common/searchheader";
  import consitinfo from "./common/guanwang";

  import requirejs from "requirejs";

  export default {
    components:{Searchheader, legends,consitinfo},
    data: function () {
      return {
        option1 : {
          "color" : ['#ff9000','#00b1ff', '#ffd801'],
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'horizontal',
            x: '2%',
            y: '90%',
            data: ['雨水管网', '污水管网', '合流制管网'],
            itemWidth:10,
            itemHeight:10,
            itemGap:5
          },
          series: [
            {
              name: '建设概况',
              type: 'pie',
              radius: ['30%', '60%'],//控制圆的半径
              avoidLabelOverlap: true,
              label: {
                normal: {
                  // position: 'outer',
                  formatter: '{d}%',
                  textStyle: {
                    color: '#333',
                    fontSize: '12px',
                  },
                }
              },
              labelLine: {
                normal: {
                  show: false,
                  length:0
                }
              },
              center: ['46%', '48%'],
              data: [
                {value: 100, name: '雨水管网'},
                {value: 200, name: '污水管网'},
                {value: 300, name: '合流制管网'}
              ]
            }
          ]
        },
        option2 : {
          "color" : ['#ff9000','#00b1ff', '#ffd801'],
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'horizontal',
            x: '2%',
            y: '88%',
            data: ['污水处理能力', '抽水能力', '污泥处理量'],
            itemWidth:10,
            itemHeight:10,
            itemGap:5
          },
          series: [
            {
              name: '建设概况',
              type: 'pie',
              radius: ['30%', '60%'],//控制圆的半径
              avoidLabelOverlap: true,
              label: {
                normal: {
                  // position: 'outer',
                  formatter: '{d}万吨/日',
                  textStyle: {
                    color: '#333',
                    fontSize: '12px',
                  },
                }
              },
              labelLine: {
                normal: {
                  show: false,
                  length:-10  //调整距离
                }
              },
              center: ['46%', '48%'],
              data: [
                {value: 100, name: '污水处理能力'},
                {value: 200, name: '抽水能力'},
                {value: 300, name: '污泥处理量'}
              ]
            }
          ]
        },
        option3 : {
          series: [{
            type: 'liquidFill',
            center: ['50%', '50%'],
            radius: '100%',
            color:['#ff293f'],
            backgroundStyle: {
              borderColor: '#fff',
              borderWidth: 8,
              color:'#fff'
            },
            itemStyle: {
              normal: {
                color: '#ff293f'
              }
            },
            outline: {
              show: false
            },
            label: {
              color:"#ff293f",
              fontSize:15,
              fontWeight:400,
              formatter: '{c}'
            },
            data: [{
              name: "",
              value: .50
            }]
          }]
        },
        option4 : {
        series: [{
          type: 'liquidFill',
          center: ['50%', '50%'],
          radius: '100%',
          color:['#10a3f1'],
          backgroundStyle: {
            borderColor: '#fff',
            borderWidth: 8,
            color:'#fff'
          },
          itemStyle: {
            normal: {
              color: '#10a3f1'
            }
          },
          outline: {
            show: false
          },
          label: {
            color:"#10a3f1",
            fontSize:15,
            fontWeight:400,
            formatter: '{c}'
          },
          data: [{
            name: "",
            value: .5
          }]
        }]
      },
        option5 : {
        series: [{
          type: 'liquidFill',
          center: ['50%', '50%'],
          radius: '100%',
          color:['#ffb500'],
          backgroundStyle: {
            borderColor: '#fff',
            borderWidth: 8,
            color:'#fff'
          },
          itemStyle: {
            normal: {
              color: '#ffb500'
            }
          },
          outline: {
            show: false
          },
          label: {
            color:"#ffb500",
            fontSize:15,
            fontWeight:400,
            formatter: '{c}'
          },
          data: [{
            name: "",
            value: .20
          }]
        }]
      },
        option6 : {
          series: [{
            type: 'liquidFill',
            center: ['50%', '50%'],
            radius: '100%',
            color:['#5ae0bc'],
            backgroundStyle: {
              borderColor: '#fff',
              borderWidth: 8,
              color:'#fff'
            },
            itemStyle: {
              normal: {
                color: '#5ae0bc'
              }
            },
            outline: {
              show: false
            },
            label: {
              color:"#5ae0bc",
              fontSize:15,
              fontWeight:400,
              formatter: '{c}'
            },
            data: [{
              name: "",
              value: 0.3
            }]
          }]
        },
        option7 : {
          series: [{
            type: 'liquidFill',
            center: ['50%', '50%'],
            radius: '100%',
            color:['#a61bff'],
            backgroundStyle: {
              borderColor: '#fff',
              borderWidth: 8,
              color:'#fff'
            },
            itemStyle: {
              normal: {
                color: '#a61bff'
              }
            },
            outline: {
              show: false
            },
            label: {
              color: '#a61bff',
              fontSize: 14,
              fontWeight:400,
              formatter: '{c}'
            },
            data: [{
              name: "",
              value: .2
            }]
          }]
        },
        option8 : {
          color: ["#00a2ff"],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            bottom: '15%',
            top: '15%',
            left: '10%',
            right: '10%'

          },
          xAxis: [{
            axisLine: {//x轴的深色轴线，如图2
              show: true,
              lineStyle: {
                color: "#888",
              }
            },
            axisLabel: {
              color: "#5b5b5b",
              textStyle:{
                fontSize:14 // 让字体变大
              }
            },
            type: 'category',
            data: ['污水泵站', '雨水泵站', '雨污泵站']
          }],
          yAxis: [{
            axisLine: {//y轴的深色轴线，如图2
              show: true,
              lineStyle: {
                color: "#5b5b5b",
              }
            },
            splitLine: {//x轴的竖线
              show: true,
              lineStyle: {
                color: "#dcd9d9",
                type: "dotted"
              }
            },
            axisLabel: {
              color: "#888",
              formatter: '{value}',
              textStyle:{
                fontSize:14 // 让字体变大
              }
            },
            type: 'value',
            name: '',
          }],
          series: [{
            name: '流量',
            type: 'bar',
            data: [20, 12, 31],
            barWidth : 18,//柱图宽度
          }]
        },
        pointerShow:1,
        watcher:{name:"值班员",list:[{name:"科室",checked:false},
            {name:"防洪所",checked:false},
            {name:"排水管网所",checked:false},
            {name:"天辉公司",checked:false},
            {name:"合肥市排水管理办公室",checked:false},
            {name:"安徽振升保安服务有限公司",checked:false},
            {name:"合肥鸿辉物业管理有限公司",checked:false},
            {name:"污泥中心",checked:false},
            {name:"王小郢污水处理厂",checked:false},
            {name:"朱砖井污水处理厂",checked:false},
            {name:"陶冲污水处理厂",checked:false},
            {name:"西部组团污水处理厂",checked:false},
            {name:"小仓房污水处理厂",checked:false}]},
        water:{name:"积水",list:[]},
        cars:{name:"车辆",list:[
            {name:"皮卡车",checked:false},
            {name:"垃圾运输车",checked:false},
            {name:"高压清洗车",checked:false},
            {name:"电源车",checked:false},
            {name:"移动泵车",checked:false},
            {name:"污泥自卸车",checked:false},
            {name:"轻货车",checked:false},
            {name:"工程车",checked:false},
            {name:"巡查车",checked:false},
            {name:"污泥运输车",checked:false},
            {name:"CCTV中型专项作业车",checked:false}
          ]},
        conSitInfo:[
          {name:"入河排口",count:"4",unit:"个"},
          {name:"河道闸阀",count:"15",unit:"个"},
          {name:"调蓄池",count:"6",unit:"座"},
          {name:"检查井盖",count:"5",unit:"座"},
          {name:"雨水篦子",count:"10",unit:"万块"}]
      }
    },
    methods: {
      searchList:function (value) {
        alert('根据条件：‘'+value+'’执行搜索');
      }
    },
    mounted: function () {
       var myChart1= echarts.init(document.getElementById('conSitEchart')),
        myChart2= echarts.init(document.getElementById('abiSitEchart')),
        myChart3= echarts.init(document.getElementById('csjishui')),
        myChart4= echarts.init(document.getElementById('gwyunxing')),
        myChart5= echarts.init(document.getElementById('bzyunxing')),
        myChart6= echarts.init(document.getElementById('wscyunxing')),
        myChart7= echarts.init(document.getElementById('szjiance')),
        myChart8= echarts.init(document.getElementById('pipInsInfo'));

        myChart1.setOption(this.option1);
        myChart2.setOption(this.option2);
        myChart3.setOption(this.option3);
        myChart4.setOption(this.option4);
        myChart5.setOption(this.option5);
        myChart6.setOption(this.option6);
        myChart7.setOption(this.option7);
        myChart8.setOption(this.option8);
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
        myChart5.resize();
        myChart6.resize();
        myChart7.resize();
        myChart8.resize();

      var openLayers = require("openlayers");
      requirejsVars.define("ol",[],function () {
        return openLayers;
      });

      var proj4 = require("proj4");
      requirejsVars.define("proj4",[],function () {
        return proj4;
      });

      requirejsVars.require.config({
        baseUrl:"http://localhost/gis/vendor/",
        paths:{
          g2:"TS-GIS/g2",
          gis:"TS-GIS/gis",
          services:"TS-GIS/services"
        },
        shim:{
          gis:{
            deps:['g2',"ol"],
            exports:"gis"
          },
          g2:{
            exports:"g2"
          },
          services:{
            exports:"services",
            deps:["g2","gis"]
          }
        }
      });

      requirejsVars.require.onError = function (err) {
        console.log(err.requireType);
        if (err.requireType === "timeout") {
          console.log("modules: " + err.requireModules);
        }
        throw err;
      };

      requirejsVars.require(["g2","gis"],function () {
        var g2map = new g2.maps.Map({
          "defaultExtent":{
            "maxZoom":20,
            "minZoom":3,
            "level":3,
            "center":[13043947.82617909,3721547.0998887755],
            "extent":[1.2767343718571339E7,3406866.1547987578,1.334108437411987E7,4137684.0480862716],
            "projection":"EPSG:3857"
          }
        });
        g2map.init({targetId:'g2map'});
        var arcgisXYZ = new g2.lys.TileLayer({
          "name":"HF0110ok",
          "layerType":1,
          "tileType":207,
          "opacity":1.0,
          "visible":true,
          "projection":"ESPG:3857",
          "url": "http://172.19.0.220:6080/arcgis/rest/services/HF0110ok/MapServer"
        });
        g2map.addLayer(arcgisXYZ);

        var url =  "http://172.19.0.220:6080/arcgis/rest/services/paishui/paishui_gxgd/MapServer";
        var layer_1 = new g2.lys.TileLayer({
          "params":{
            "layers":"show:0,1,2,3,4,5"
          },
          "name":"ranqi",
          "id":"ranqi",
          "opacity":1.0,
          "visible":true,
          "projection":"ESPG:4326",
          "tileType":207,
          "url": url
        });

        g2map.addLayer(layer_1);

        var point = new g2.geom.Point({
          x:13043947.82617909,
          y:3721547.0998887755,
          z:0,
          spatialReference: g2.geom.SpatialReference.EPSG3857
        });
        var picSource = "iVBORw0KGgoAAAANSUhEUgAAABoAAAAfCAYAAAD5h919AAADFElEQVRIS7WXTUwTQRTH/xtpCzSNlXAQSSUpoYREPGnCsRq4mBQSPXmqCSkUCnqgPRoIJ4X1BP1YMCocPHjiK156wQMXr4RQFBKShthI1BIiq92VNbMw627Zr0aYpGlndvb93v/Nm5lXBgDm5uYCDMOEALSS/jm2LUmSlsPh8CfmFMJxHBcURVFmMAwjf0uSJP+mfTpm5gidKwgCSqUS4vH4qiRJ/cz8/PxIJpNhnR0dcHZ1yTYuNTb+t6g/e3soZbP4ls0ikUjECWgmmUxGLo+NnQtA7SGBFUdHMTQ0NCuDUqlU5MrMjC0V79vbcW993dZcMukgGkU0Gj0BpdPpiJfjLF8mENIqAf3o68Pg4KB9UG9DAx7U11cMKvb3Y2BgwH7oqBpCur+xgV/Hx7jl8aDd7cbrQsEwGhUrUoNo+LxVVXjb1oaJfB6rxaIuTAOykwzloDeFAt7t7+OO14uEz4ferS18KZXOwCoGvWptxVWnU2OIJgV14nk+jw9lymyvEU3nttpavGhuNs3MA1HEw81NzRxbiib8ftxwu5V0Lg+fHjWcy2FfEJRHlqCbbjee+f2aPWMH9FUQ8CiX0wfpbVi1UbIWdiDE+sfDQ4zt7tpXZGXYCL7N83i8vX3xoM2jI4zs7CggTdZZhU5v0Ymiay4XXgYCuilPBy3TO93Sgqbqat10pvsn7vPhrtdrCtJkHbmP6mZnzxg1WqfyjUpf1DvVNYqMQMSA3hlHxjOBAK67XIpzRldHRYfqbY8H30UROzyvGH7a1IR6hwNPVBmmF2eNoqmpqciV8fELv8pHWJZl6zo7L6Q44dfWEIvF4kq5NTk5GXSdxtzhcMhRIOVWdSiEmhAp+Ywbv7wMfmlJKc3Ie+RDWiwWOym3SMekgGxJpVJBMxiB/F5ZIdf1KoDPZe78KyDNPKXFZTKZDNZ0d59RRpVQr0lFamTvpCQ1aRQ2PT0drO3pUWAE8nNhAcPDw3JozCDEvCVIFVqOwsjY0eIiKQxtQWyD1DCWZYOkT2tqKyU0WLYU0cmqpCFZJf9LsAo9ff4X9HwAAqRDyxMAAAAASUVORK5CYII=";
        var markerSymbol = new g2.syms.Picturemarkersymbol({
          source:picSource,
          width:"26",
          height:"31",
          rotation:"0",
          opacity:"1",
          offsetX:"13",
          offsetY:"31"
        });
        var eles=[];
        var ele = new g2.ele.Element({
          geometry:point,
          symbol:markerSymbol
        });
        eles.push(ele);
        var layer = new g2.lys.ElementLayer({map: g2map, id: 'Layer' + "point", visible: true, cache:true});
        g2map.addLayer(layer);
        layer.addElements(eles,true);
        var contentTemplate ="<div>"+"<table><tr><td>"+"姓名："+"</td><td>"+"买买买"+"</td></tr><tr><td>"+"手机号码："+"</td><td>"+"18709863966"+"</td></tr><tr><td>"+"所属单位："+"</td><td>"+"合肥市排水管理办公室"+"</td></tr></table></div>";
        var toolTipWare = null;
        layer.on("click", function (button, shift, screenX, screenY, mapX) {
          var tooltip = new g2.ext.Tooltip({
            anchor: mapX.geometry,     //提示在地图上停靠位置
            content: contentTemplate,  //提示内容
            layerId: layer.getLayerId(), //提示所在图层ID
            offset: [-45, -85],     //位置偏移量
            className:'watchersInfo'  //tooltip样式
          });
          if(toolTipWare){
            toolTipWare.clear();
          }
          toolTipWare = new g2.ext.TooltipWare({map: g2map });
          toolTipWare.add(tooltip,true);
        });
      });
    },
    created:function(){

    }
  }
</script>

<style>
  [_echarts_instance_]>div{
    border-radius: 50% !important;
  }
</style>
